<template>
    
    <!-- 组件的模板 -->
    <div class="wrap">
        <div class="tip">
            <div class="left">注：</div>
            <div class="right">
                <p>合作企业在项目列表中可查看该项目</p>
                <p>合作企业不可对项目设置进行修改</p>
            </div>
        </div>
        <div class="exist" v-if="relate_team_info.team_id">
            {{relate_team_info.team_name}}
            <span @click="clearRelateTeam"></span>
        </div>
        <div class="weui-cells weui-cells_form" v-else>
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <input v-model='mobile' maxlength="11" class="weui-input" type="tel" placeholder="通过企业负责人手机号搜索企业" @input="inputMobileFn">
                </div>
            </div>
        </div>
        <div class="searchResult" v-if="search_team_info.team_id" @click="selectResultFn">
            <p class="title">{{search_team_info.team_name}}</p>
            <p class="otherInfo">负责人：{{search_team_info.name}} （{{search_team_info.mobile}}）</p>
        </div>
        <div class="noResult" v-if="noResult">您查找的企业不存在</div>
    </div>
</template>

<script>
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    import * as util from 'js/util.js'
    import commonPage from 'clientApi/commonPage'
    import widget from 'gapi/widget'
    import clientUi from 'gapi/clientUi'
    
    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */

    /**
     *  组件实例对象
     */
    export default {
        components: {

        },
        data: function(){
            return{
                team_id: 0,
                mobile: '',
                search_team_info: {},
                relate_team_info: {
                    // "team_id": "12707",
                    // "team_name": "测试公司",
                    // "mobile": "15010078636",
                    // "name": "liujiaqi"
                },
                old_relate_team_info: {},
                noResult: false,
            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){
                this.team_id = util.getUrddataString('team_id')
                let relate_team_id = util.getUrddataString('relate_team_id')
                let relate_team_name = util.getUrddataString('relate_team_name')
                this.relate_team_info = this.old_relate_team_info = relate_team_id ? {
                    "team_id": relate_team_id,
                    "team_name": relate_team_name,
                    "mobile": "",
                    "name": ""
                } : {}
            },
            clearRelateTeam(){
                this.relate_team_info = {}
            },
            inputMobileFn(){
                this.search_team_info = {}
                this.noResult = false
                if(this.mobile.length == 11){
                    util.ajax({
                        url:'/team/info/search',
                        type:'GET',
                        data:{
                            team_id: this.team_id,
                            mobile : this.mobile
                        },
                        timeout:10000,
                        success:(result) => {
                            // alert(JSON.stringify(result))
                            if(result.errno == 0){
                                this.search_team_info = result.data
                            }else if(result.errno == 12017){
                                this.noResult = true
                            }else{
                                widget.toast(result.errmsg)
                            }
                        },
                        error: (xhr, status) => {
                            // error
                            console.log(xhr)
                        },
                        noNetwork: () => {
                            // 无网络的回调
                            widget.toast('网络连接失败，请检查网络')
                        }
                    })
                }
            },
            selectResultFn() {
                if(this.team_id == this.search_team_info.team_id){
                    widget.toast('不可选择当前所在企业')
                    return
                }
                this.relate_team_info = JSON.parse(JSON.stringify(this.search_team_info))
                this.search_team_info = {}
                this.mobile = ''
            },
            //修改时 立即生效
            saveRelateTeam() {
                util.ajax({
                    url:'/project/info/update_relate_team',
                    type:'POST',
                    data:{
                        team_id: this.team_id,
                        project_id: util.getUrddataString('project_id'),
                        relate_team_id : this.relate_team_info.team_id ? this.relate_team_info.team_id : 0
                    },
                    timeout:10000,
                    success:(result) => {
                        // alert(JSON.stringify(result))
                        if(result.errno == 0){
                            widget.toast('修改成功')
                            commonPage.goBack(1,{key: 'relate_team_info', value: this.relate_team_info})
                        }else{
                            widget.toast(result.errmsg)
                        }
                    },
                    error: (xhr, status) => {
                        // error
                        console.log(xhr)
                    },
                    noNetwork: () => {
                        // 无网络的回调
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
            }
        },
        created(){

            this.init();
            if(util.getUrddataString('source') !== 'new'){
                this.$watch('relate_team_info',(newValue,oldValue) => {
                    let isChange = this.relate_team_info.team_id != this.old_relate_team_info.team_id
                    if(isChange){
                        commonPage.updateTitleBar({
                            // backAction: 'gotoback',
                            // leftDisplay: false,
                            // leftText: '',
                            // leftAction: 'gotoback',
                            rightDisplay: true,
                            rightText: '确定',
                            rightAction: 'doSave'
                        })
                    }else{
                        commonPage.updateTitleBar({
                            // backAction: 'gotoback',
                            // leftDisplay: false,
                            // leftText: '',
                            // leftAction: 'gotoback',
                            rightDisplay: false,
                            rightText: '确定',
                            rightAction: 'doSave'
                        })
                    }
                },{deep:true})
            }else{
                commonPage.updateTitleBar({
                    // backAction: 'gotoback',
                    // leftDisplay: false,
                    // leftText: '',
                    // leftAction: 'gotoback',
                    rightDisplay: true,
                    rightText: '确定',
                    rightAction: 'doSave'
                })
            }
            window.doSave = () => {
                if(util.getUrddataString('source') === 'new'){
                    // if(this.old_relate_team_info.team_id && !this.relate_team_info.team_id){
                    //     clientUi.showDialog('关联企业', '确定不关联任何企业？', (data) => {
                    //         if(data.status==1){
                    //             commonPage.goBack(1,{key: 'relate_team_info', value: this.relate_team_info})
                    //         }
                    //     }, '确定', '取消')
                    // }else{
                        commonPage.goBack(1,{key: 'relate_team_info', value: this.relate_team_info})
                    // }
                }else{
                    if(this.relate_team_info.team_id){
                        clientUi.showDialog('关联企业', `确定关联${this.relate_team_info.team_name}企业？`, (data) => {
                            if(data.status==1){
                                this.saveRelateTeam()
                            }
                        }, '确定', '取消')
                    }else{
                        clientUi.showDialog('关联企业', '确定不关联任何企业？', (data) => {
                            if(data.status==1){
                                this.saveRelateTeam()
                            }
                        }, '确定', '取消')
                    }
                }
                
            }
        }
        
    }

    
</script>

<!-- CSS 样式 -->
<!-- <style src="static/css/global.css"></style> -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/common.css"></style>
<style>
    .wrap{
        padding: 0.1px 12px 0;
    }
    .wrap .weui-cells:before,
    .wrap .weui-cells:after{
        border: none;
    }
    .wrap .weui-cells{
        border-radius: 2px;
        margin-top: 0;
        border: 0.5px solid #e5e5e5;
    }

    .wrap .tip{
        width: 242px;
        font-family: 'PingFangSC-Regular';
        font-size: 13px;
        color: #999999;
        line-height: 18px;
        margin: 20px auto 16px;
    }
    .wrap .tip:after{
        content: '';
        display: block;
        clear:both;
    }
    .wrap .tip>div{
        float: left;
    }
    .wrap .tip>div>p{
        text-indent: 8px;
        position: relative;
    }
    .wrap .tip>div>p:before{
        content: '';
        position: absolute;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background-color: #bbb;
        top: 7px;
        left: 0;
    }

    .wrap .exist{
        height: 48px;
        background-color: #fff;
        line-height: 48px;
        font-size: 16px;
        padding:0 37px 0 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border-radius: 2px;
        position: relative;
    }
    .wrap .exist span{
        position: absolute;
        width: 18px;
        height: 18px;
        top: 15px;
        right: 12px;

        background-image: url(../../static/imgs/sprite.png);
        background-repeat: no-repeat;
        -webkit-background-size: 250px auto;
        background-size: 250px auto;
        background-position: -46px 0;
    }

    .wrap .searchResult{
        background-color: #fff;
        border-radius: 2px 2px 4px 4px;
        padding: 12px 17px 12px 12px;
        margin-top: 2px;
        border: 0.5px solid #e5e5e5;
    }
    .wrap .searchResult .title{
        font-family: 'PingFangSC-Regular';
        font-size: 16px;
        color: #333333;
        line-height: 22px;
    }
    .wrap .searchResult .otherInfo{
        font-family: 'PingFangSC-Regular';
        font-size: 14px;
        color: #999;
        line-height: 20px;
    }
    .wrap .noResult{
        font-family: 'PingFangSC-Regular';
        font-size: 14px;
        color: #bbb;
        line-height: 20px;
        text-align: center;
        line-height: 68px;
        margin-top: 2px;
        border-radius: 2px 2px 4px 4px;
        background-color: #fff;
        border: 0.5px solid #e5e5e5;
    }
</style>

